<template>
  <div class="form">
    <div style="margin: 20px;"></div>
    <el-form label-width="80px" :model="targetGoods">
      <el-form-item label="商品编号">
        <el-input v-model="targetGoods.number"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="targetGoods.name"></el-input>
      </el-form-item>
      <el-form-item label="商品类型">
     <el-radio-group v-model="id">
    <el-radio v-for="(item,index) in classifyIdList" :label="item._id" :key="index">{{item.name}}</el-radio>
  </el-radio-group>
  </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="targetGoods.price"></el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="targetGoods.store"></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input v-model="targetGoods.intro"></el-input>
      </el-form-item>
    </el-form>
    <div>
      <el-upload class="upload-demo" drag action="/files/upLoad" :on-success="success" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将图片拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>
    <el-button type="primary" plain @click="upDateOne">确认修改</el-button>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers} from "vuex";
const {
  mapState: mapStateGoodsType,
  mapActions: mapActionsGoodsType,
} = createNamespacedHelpers("goodsType");
export default {
  props: ["_id"],
  data() {
    return {
      targetGoods: {},
      id:""
    };
  },
computed:{
    ...mapStateGoodsType(["classifyIdList"])
  },
  mounted() {
    this.getOne();
    this.getGoodsType();
  },
  methods: {
    ...mapActionsGoodsType(["getGoodsType"]),
    //获取修改对象
    getOne() {
      axios
      .get("/goods/getOne", { params: { _id: this._id } })
      .then(res => {
        [this.targetGoods]=res.data;
        this.id=this.targetGoods.classifyId._id         
      });
    },
    //上传修改后的数据
    upDateOne(){
      this.targetGoods.classifyId._id=this.id
        axios.put("/goods/upDateOne",{data:{goods:this.targetGoods}})
        .then(res=>{
            if(res.data){
                this.$router.push("/All/goodsList")
            }          
        })    
    },
    success(response, file, fileList) {
      let path = response.file[0].path.substr(6);
      this.targetGoods.detailImages.push(path);
    }
  }
};
</script>

<style>
.form{
    width:50%
}
</style>